<template>
  <div class="echarts_container">
    <div id="dept_month_refuel_echarts"></div>
  </div>
</template>

<script lang="ts">
import * as echarts from "echarts";
import { getByKeyApi } from "@/api/largeScreen";

export default {
  name: "deptMonthRefuel",
  data () {
    return {
      dataInfo: {},
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
     initData () {
      getByKeyApi("mounth_order").then((res) => {
      res.data.forEach(item=>{
        item.organAmountList = item.configValue.split("-").map(Number)
        item.organNameList = item.remark.split("-")
      })
        let dataInfo = {
          organAmountList:res.data[0].organAmountList,
          organNameList:res.data[0].organNameList
        }
      this.dataInfo = dataInfo
        // 切换页面回来之后echarts不渲染的问题(移除_echarts_instance_属性)
        const echartsDOM = document.getElementById("dept_month_refuel_echarts")
        if (!echartsDOM) return;
        echartsDOM?.removeAttribute('_echarts_instance_')
        const myChart = echarts.init(echartsDOM);
        let _params = {}
        // 绘制图表
        myChart.setOption({
          tooltip : {
            trigger: 'axis',
            formatter: function (params){
              _params = params;
              return `${params[0].name} <br />
                      ${params[0].marker} ${params[0].seriesName} ${params[0].value}`
            }
          },
          grid: {
            left: '50',
          },
          xAxis : [
            {
              type : 'category',
              data : this.dataInfo.organNameList,
              splitLine: {
                show: false
              },

              axisLabel: {
                show: true,
                interval: 0,
                // rotate: 40,
                textStyle: {
                  color: '#FFFFFF',
                  align: 'center'
                },
                // formatter:function(value,index)
                // {
                //   const name = value.substring(0, 2)
                //   const nameArr = name.split('')
                //   return nameArr[0] + '\n' + nameArr[1]
                // }
              }
            }
          ],
          yAxis : [
            {
              type : 'value',
              name : '',
              alignTicks: true,
              nameTextStyle: {
                color: '#FFFFFF',
              },
              splitLine: {
                show: false
              },
              axisLine: {
                show: true,
              },
              axisLabel : {
                show: true,
                formatter: '{value} ',
                textStyle: {
                  color: '#FFFFFF',
                  align: 'right'
                }
              },
            },
          ],
          series : [
            {
              name: '',
              type: 'bar',
              data: this.dataInfo.organAmountList
            }
          ]
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
  .echarts_container {
    height: 100%;
    margin-top: 10px;
  }
  #dept_month_refuel_echarts {
    width: 100%;
    height: 100%;
  }
</style>
